import Taro, { Component } from '@tarojs/taro'
import { CommonEvent } from '@tarojs/components/types/common'
import {
  AtList, AtListItem, AtInput, AtTextarea,
  AtCheckbox, AtRate } from 'taro-ui'
// import type { File } from 'taro-ui/types/image-picker';

import { View, Picker } from '@tarojs/components'

interface CommonFormState {
  type: string
  subType: "number" | "text" | "password" | "phone" | "idcard" | "digit" | undefined
  title: string
  name?: string
  option: string[]
  placeholder?: string
  value: string
  // files: File[]
}

export interface CommonFormProps {
  data: CommonFormState[]
}

export default class CommonForm extends Component<CommonFormProps> {

  constructor(props: CommonFormProps) {
    super(props);
    this.state = {
      ...props,
    };
  }

  /* 通用输入类型的问题 handle */
  private handleInputChange = (key: string, value: string): void => {
    const data = this.state.data.map((parms, index) => {
      if (key === index) {
        parms.value = value
        return parms
      }
    })
    this.setState({ ...data })
  }

  createCommonInput(parms: CommonFormState, index: number) {
    const {
      title,
      name = title,
      subType = 'text',
      placeholder = '请输入',
      value,
    } = parms;

    return (
      <AtInput
        // taroKey={name}
        name={name}
        title={title}
        type={subType}
        className='list-items__input'
        placeholder={placeholder}
        placeholderClass='list-items__placeholder'
        value={value}
        onChange={this.handleInputChange.bind(this, index)}
      />
    )
  }

  createCommonLongInput(parms: CommonFormState, index: number) {
    const {
      title,
      name = title,
      subType = 'text',
      placeholder = '请输入',
      value,
    } = parms;

    return (
      <View>
        <View className='panel__title'>肝移植相关情况</View>
        <AtTextarea
          maxLength={200}
          placeholder={placeholder}
          placeholderClass='list-items__placeholder'
          value={value}
          onChange={this.handleInputChange.bind(this, index)}
        />
      </View>
    )
  }

  /* 通用单选类型的问题 handle */
  private handleSelectionChange = (key: string, e: CommonEvent): void => {
    const data = this.state.data.map((parms, index) => {
      if (key === index) {
        parms.value = e.detail.value
        return parms
      }
    })
    this.setState({ ...data })
  }

  createCommonSelect(parms: CommonFormState, index: number) {
    const {
      title,
      value,
      option,
    } = parms;

    return (
      <Picker
        mode='selector'
        range={option}
        value={value}
        className='list-items__picker'
        onChange={this.handleSelectionChange.bind(this, index)}
      >
        <AtListItem
          title={title}
          className='list-items__text'
          extraText={option[value]}
        />
      </Picker>
    )
  }

  /* 通用日期类型的问题 handle */
  private handleDateSelectionChange = (key: string, e: CommonEvent): void => {
    const data = this.state.data.map((parms, index) => {
      if (key === index) {
        parms.value = e.detail.value
        return parms
      }
    })
    this.setState({ ...data })
  }

  createCommonDateSelect(parms: CommonFormState, index: number) {
    const {
      title,
      value,
    } = parms;

    return (
      <Picker
        mode='date'
        value={value}
        className='list-items__picker'
        onChange={this.handleDateSelectionChange.bind(this, index)}
      >
        <AtListItem
          title={title}
          className='list-items__text'
          extraText={value ? value : '请选择'}
        />
      </Picker>
    )
  }

  /* Radio 联动类型 */
  private handleRadioChange = (key: string, e: []): void => {
    const data = this.state.data.map((parms, index) => {
      if (key === index) {
        const b = parms.relations;
        const sb = new Set(b);
        const minus = e.filter(x => !sb.has(x));
        parms.value = minus[0]
        parms.relations = minus
        return parms
      }
    })
    this.setState({ ...data })
  }
  /* Radio 联动类型 input */
  private handleRadioInputChange = (key: string, value: string): void => {
    const data = this.state.data.map((parms, index) => {
      if (key === index) {
        parms.valueStr = value
        return parms
      }
    })
    this.setState({ ...data })
  }

  createCommonRadio(parms: CommonFormState, index: number) {
    const {
      value,
      valueStr,
      option,
      relation,
      relations,
    } = parms;

    console.log(parms);

    const rCheckBox = (
      <AtCheckbox
        options={option}
        selectedList={relations}
        onChange={this.handleRadioChange.bind(this, index)}
      />
    )

    const rInput = (
      <AtInput
        name='value'
        type='text'
        placeholder='请在这里输入您与患儿的关系'
        value={valueStr}
        onChange={this.handleRadioInputChange.bind(this, index)}
      />
    )

    if (value === relation) {
      return (
        <View>
          {rCheckBox}
          {rInput}
        </View>
      )
    }

    return (
      <View>
        {rCheckBox}
      </View>
    )
  }

  /* 通用评分类型 handle */
  private handleRateChange = (key: string, value: string): void => {
    const data = this.state.data.map((parms, index) => {
      if (key === index) {
        parms.value = value
        return parms
      }
    })
    this.setState({ ...data })
  }

  /* 通用评分类型  */
  createCommonRate(parms: CommonFormState, index: number) {
    const {
      // title,
      // name = title,
      // subType = 'text',
      // placeholder = '请输入',
      value,
    } = parms;

    return (
      <AtRate
        value={value}
        onChange={this.handleRateChange.bind(this, index)}
      />
    )
  }

  /* 多选类型 */
  private handleCheckBoxChange = (key: string, value: string): void => {
    const data = this.state.data.map((parms, index) => {
      if (key === index) {
        parms.value = value
        return parms
      }
    })
    this.setState({ ...data })
  }

  /* 通用评分类型  */
  createCommonCheckBox(parms: CommonFormState, index: number) {
    const {
      title,
      option,
      relations,
      value,
    } = parms;

    return (
      <View>
        <AtListItem title={title} />
        <AtCheckbox
          options={option}
          selectedList={relations}
          onChange={this.handleCheckBoxChange.bind(this, index)}
        />
      </View>
    )
  }

  render() {
    const {
      data = [],
    } = this.props

    return (
      <View className='list-items'>
        <AtList>
          {
            data.map((parms, index) => {
              if (parms.type === 'input') {
                return this.createCommonInput(parms, index)
              }
              else if (parms.type === 'longInput') {
                return this.createCommonLongInput(parms, index)
              }
              else if (parms.type === 'select') {
                return this.createCommonSelect(parms, index)
              }
              else if (parms.type === 'radio') {
                return this.createCommonRadio(parms, index)
              }
              else if (parms.type === 'multiSelect') {
                return this.createCommonCheckBox(parms, index)
              }
              else if (parms.type === 'dateSelect') {
                return this.createCommonDateSelect(parms, index)
              }
            })
          }
        </AtList>
      </View>
    )
  }
}
